<template>
  <div class="container">
    <div class="payee" v-if="showImg" style="min-width: 1200px">
      <img src="@/assets/imgs/setting/noData.png" class="img" />
      <div class="hint">您还没有添加结算卡</div>
      <el-button
        type="primary"
        round
        class="addBtn"
        icon="el-icon-bank-card"
        @click="addBank"
        >新增结算卡</el-button
      >
    </div>
    <div class="card-list" v-else style="min-width: 1200px">
      <div class="account">
        <div class="title">我的结算卡</div>
        <div class="account-wrapper" ref="wrap">
          <div
            v-for="(item, index) of this.dataList"
            :key="index"
            class="account-item"
            @click="setCurrent(item, index)"
          >
            <div class="left">
              <div class="bank">
                <img
                  :src="require('@/assets/imgs/bank/' + item.bankCode + '.png')"
                />
                <span class="tit">{{ item.bankName }}</span>
              </div>
              <div class="company">
                <div class="tip">
                  {{ item.bankAcctType === "1" ? "公户" : "私户" }}
                </div>
                <div class="name">
                  {{ item.cardName }}
                </div>
              </div>
              <div class="number">
                {{ item.cardNo }}
              </div>
            </div>
            <div class="right">
              <img src="@/assets/imgs/setting/more.png" />
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="using" v-if="Object.keys(currentBank).length">
        <div class="banner" style="min-width: 573px">
          <div class="fBox">
            <img
              src="@/assets/imgs/setting/delete.png"
              @click="stopUse(currentBank.id)"
            />
          </div>
          <div class="bankCard">{{ currentBank.cardNo }}</div>
          <div class="company">
            <div>{{ currentBank.cardName }}</div>
            <div>{{ currentBank.bankAcctType === "1" ? "公户" : "私户" }}</div>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <div class="label_">账户名称</div>
            <div class="value_">{{ currentBank.cardName }}</div>
          </div>
          <div class="item">
            <div class="label_">银行卡号</div>
            <div class="value_">{{ currentBank.cardNo }}</div>
          </div>
          <div class="item">
            <div class="label_">开户银行</div>
            <div class="value_">{{ currentBank.bankName }}</div>
          </div>
        </div>
      </div> -->
      <div class="addBox">
        <div class="add-btn" @click="addBank">
          <img src="@/assets/imgs/setting/card.png" />
          <span class="tit">新增结算卡</span>
        </div>
        <!-- <el-button type="primary" icon="el-icon-bank-card" @click="addBank"
          >添加银行卡</el-button
        > -->
      </div>

      <!-- <el-table :data="dataList">
        <el-table-columns
          show-overflow-tooltip
          prop="bankAcctType"
          align="center"
          label="账户类型"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.bankAcctType === "1" ? "对公账户" : "对私账户" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="cardName"
          align="center"
          label="账户名称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="bankName"
          align="center"
          label="开户银行"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="cardNo"
          align="center"
          label="银行卡号"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="currentSettleAccount"
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ setText(scope.row.currentSettleAccount) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row.id)"
              type="text"
              v-if="!scope.row.currentSettleAccount"
              >修改</el-button
            >
            <el-button
              @click="stopUse(scope.row.id)"
              type="text"
              v-if="scope.row.currentSettleAccount"
              >停用</el-button
            >
            <el-button
              @click="deleteHandle(scope.row.id)"
              type="text"
              v-if="!scope.row.currentSettleAccount"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="切换"
        >
          <template slot-scope="scope">
            <el-button
              @click="goCode('SMS_BUSINESS_SWITCH_ACCOUNT', scope.row.id)"
              type="text"
              v-if="!scope.row.currentSettleAccount"
              >使用当前账号</el-button
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table> -->
    </div>

    <codeDialogVue
      codeId="9"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />

    <el-drawer
      :modal="false"
      :visible.sync="dialog"
      :direction="direction"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="card-desc">
        <!-- <img
          v-if="!this.currentBank.currentSettleAccount"
          src="@/assets/imgs/setting/out.png"
          class="outImg"
        /> -->
        <div class="bank">
          <img
            v-if="Object.keys(this.currentBank).length > 0"
            :src="
              require('@/assets/imgs/bank/' +
                this.currentBank.bankCode +
                '.png')
            "
          />
          <span class="tit">{{ this.currentBank.bankName }}</span>
        </div>
        <div class="number">{{ this.currentBank.cardNo }}</div>
        <div class="company">
          <div class="name">{{ this.currentBank.cardName }}</div>
        </div>
      </div>
      <!-- <div class="money-desc">
        <div class="tit">本卡累计收款</div>
        <div class="content">
          <div class="count">
            <span>￥</span>
            192,825.32
          </div>
          <div class="area">
            <img class="c" src="@/assets/imgs/setting/c.png" />
            <span>RMB</span>
            <img class="d" src="@/assets/imgs/setting/down.png" />
          </div>
        </div>
      </div> -->
      <div
        class="channel-desc"
        v-if="
          currentBank.channlNameList && currentBank.channlNameList.length > 0
        "
      >
        <div class="tit">收款渠道</div>
        <div class="content">
          <el-checkbox
            v-for="(channel, idx) of currentBank.channlNameList"
            :key="idx"
            checked
            disabled
            >{{ CHANNEL_TYPE[channel] }}</el-checkbox
          >
          <!-- <el-checkbox checked disabled>支付宝</el-checkbox> -->
        </div>
      </div>
      <div class="account-desc">
        <div class="tit">账户详情</div>
        <div class="acc-list">
          <div class="acc-item">
            <span>账户类型</span>
            {{ currentBank.bankAcctType === "1" ? "公户" : "私户" }}
          </div>
          <div class="acc-item">
            <span>账户名称</span>
            {{ currentBank.cardName }}
          </div>
          <div class="acc-item">
            <span>银行账号</span>
            {{ currentBank.cardNo }}
          </div>
          <div class="acc-item">
            <span>开户银行</span>
            {{ currentBank.bankName }}
          </div>
          <div class="acc-item">
            <span>所在地</span>
            {{ currentBank.address }}
          </div>
        </div>
      </div>
      <div class="btn-desc">
        <div class="wrap" @click="checkUse(currentBank.id)">
          <div class="img">
            <img src="@/assets/imgs/setting/dele.png" alt="" />
          </div>
          <div>删除</div>
        </div>
        <!-- <div class="wrap" @click="handleType(currentBank.id)">
          <div
            class="img r"
            :class="currentBank.currentSettleAccount ? '' : ' out'"
          >
            <img
              :src="
                currentBank.currentSettleAccount
                  ? require('@/assets/imgs/setting/lock.png')
                  : require('@/assets/imgs/setting/unlock.png')
              "
            />
          </div>
          <div>
            {{ currentBank.currentSettleAccount ? "停用" : "切换启用" }}
          </div>
        </div> -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";

import mixin from "@/mixins/mixin";
export default {
  mixins: [mixin],
  name: "settingPayeeAccount",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/memberbank/searchByPage",
        deleteURL: "/api/merchant/memberbank/delete",
      },
      showImg: false,
      currentBank: {},

      dialog: false,
      direction: "rtl",
    };
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.query();
        }
      },
    },
    deep: true,
  },
  methods: {
    checkUse(id) {
      this.$http
        .get(`/api/merchant/memberbank/getCurrentAccountIsBind?id=${id}`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data)
            if (!res.data) {
              //删除
              this.deleteHandle(id);
            } else {
              return;
            }
          }
        });
    },
    sortAccount(arr) {
      const useArr = arr.filter((item) => item.currentSettleAccount == true);
      const outArr = arr.filter((item) => item.currentSettleAccount == false);
      this.dataList = useArr.concat(outArr);
      //console.log(this.dataList);
    },
    setCurrent(item, index) {
      // console.log(this.$refs.wrap)
      let wrap = this.$refs.wrap;
      var items = wrap.getElementsByClassName("account-item");
      // console.log(Object.prototype.toString.call(Array.from(items)))
      Array.from(items).forEach((item) => {
        item.className = "account-item";
      });
      items[index].className += " cur";

      // var params = new FormData();
      // params.append("id", item.id);
      this.$http
        .get(`/api/merchant/memberbank/get?id=${item.id}`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.currentBank = res.data;
            this.dialog = true;
          }
        });
    },
    handleType(id) {
      //console.log(id);
      if (this.currentBank.currentSettleAccount) {
        this.stopUse(id);
      } else {
        this.goCode("SMS_BUSINESS_SWITCH_ACCOUNT", id);
      }
    },
    handleClose(done) {
      done();
    },
    codeStateFn(val) {
      if (val) {
        this.handleUse(this.codeItem);
      }
    },
    goCode(val, item) {
      this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
    },
    addBank() {
      if (this.dataList.length >= 10) {
        this.$message.warning("最多可添加10张结算卡");
      } else {
        this.$router.push("/setting/addPayee");
      }
    },
    setText(val) {
      let str = "";
      switch (val) {
        case true:
          str = "使用中";
          break;
        case false:
          str = "已停用";
          break;
      }
      return str;
    },
    // 获取数据列表
    query() {
      this.dialog = false;

      this.$http
        .post(this.mixinViewModuleOptions.getDataListURL, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          params: {
            ...this.dataForm,
          },
        })
        .then((res) => {
          if (res.code !== "0000") {
            this.dataList = [];
            this.total = 0;
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.list;
          this.total = res.data.total;
          if (this.dataList.length === 0) this.showImg = true;
          //console.log(this.dataList);
          //console.log(this.dataList.length);
          // this.sortAccount(this.dataList);
          // this.currentBank =
          //   this.dataList.find((item) => item.currentSettleAccount) || {};
          // console.log(this.currentBank, "----");
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    handleEdit(id) {
      this.$router.push({
        path: "/setting/addPayee",
        query: {
          id,
        },
      });
    },
    stopUse(id) {
      this.$http
        .post("/api/merchant/settleaccount/stop", {
          payformChannel: "ada",
          memberBankId: id,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.query();
          }
        });
    },
    handleUse(id) {
      this.$http
        .post("/api/merchant/settleaccount/update", {
          payformChannel: "ada",
          memberBankId: id,
        })
        .then(() => {
          this.query();
          // if (res.code === "0000") {
          // }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  padding: 20px;
  .title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d1c1c;
    line-height: 25px;
  }
  .account-wrapper {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    margin-left: -19px;
    .account-item {
      cursor: pointer;
      min-width: 446px;
      height: 174px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #d8d8d8;

      padding: 30px 20px 40px 35px;
      display: flex;
      justify-content: space-between;
      margin-left: 19px;
      margin-bottom: 20px;

      .left {
        .bank {
          display: flex;
          align-items: center;
          margin-top: 2px;
          img {
            width: 30px;
            margin-right: 15px;
          }
          img.out {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
          }
          .tit {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4f595f;
          }
          .tit.out {
            color: #bfbfbf;
          }
        }
        .company {
          padding-left: 44px;
          margin-top: 11px;
          div {
            display: inline-block;
          }
          .tip {
            width: 44px;
            height: 16px;
            background: #f6f6f6;
            border-radius: 2px;

            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
            line-height: 17px;
            text-align: center;
            margin-right: 10px;
          }
          .tip.out {
            color: #bfbfbf;
          }
          .name {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 17px;
          }
          .name.out {
            color: #bfbfbf;
          }
        }
        .number {
          padding-left: 44px;
          margin-top: 24px;

          font-size: 18px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #1d1c1c;
          line-height: 21px;
        }
        .number.out {
          color: #bfbfbf;
        }
      }
      .right {
        img {
          width: 20px;
        }
      }
    }
    .account-item.out {
      border: 1px solid #e5e5e5;
    }

    .account-item.cur {
      border: 1px solid #03bfc6;
      background: rgba(3, 191, 198, 0.03);
    }
  }
}

.using {
  padding: 40px;
  display: flex;
  .banner {
    height: 315px;
    width: 573px;
    margin-right: 80px;
    background: url("@/assets/imgs/setting/banner.png");
    background-size: 573px 315px;
    position: relative;
    color: #fff;
    padding: 0 35px;
    .fBox {
      position: absolute;
      right: -26px;
      top: -26px;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      .cBox {
        border: 1px;
        border-color: #fff;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        margin-top: 0px;
        margin-left: 5px;
        text-align: center;
        line-height: 62px;
        font-size: 22px;
      }
    }
    .bankCard {
      font-size: 26px;
      font-weight: 500;
      margin-top: 180px;
      margin-bottom: 30px;
    }
    .company {
      display: flex;
      justify-content: space-between;
    }
  }
  .box {
    width: 572px;
    .item {
      display: flex;
      height: 80px;
      border-top: 1px solid #f0f0f0;
      line-height: 80px;
      .label_ {
        color: #869daa;
        margin-right: 30px;
      }
      .value_ {
        color: #4f595f;
        font-weight: 500;
      }
      &:last-child {
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }
}
.addBox {
  margin-top: 40px;
  margin-left: 20px;
  .add-btn {
    width: 446px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px dashed #03bfc6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 23px 0;
    cursor: pointer;

    span {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #03bfc6;
      // line-height: 25px;
    }
    img {
      margin-right: 20px;
    }
  }
  // text-align: right;
  // margin-bottom: 20px;
  .el-icon-bank-card {
    font-size: 16px;
  }
}
.payee {
  text-align: center;
  .img {
    width: 428px;
    height: 298px;
    margin-top: 150px;
  }
  .hint {
    font-size: 20px;
    font-weight: 600;
    color: #4f595f;
    margin: 50px 0;
  }
  :deep(.addBtn) {
    width: 442px;
    height: 50px;
    border-radius: 35px;
    font-size: 14px;
    .el-icon-bank-card {
      font-size: 16px;
      vertical-align: middle;
      margin-right: 10px;
    }
    span {
      vertical-align: middle;
    }
  }
}

.card-desc {
  width: 333px;
  height: 211px;
  background: url(@/assets/imgs/setting/card_bg.png) no-repeat center center;
  margin: 0 auto;
  padding: 30px;
  padding-bottom: 27px;
  position: relative;
  .outImg {
    position: absolute;
    top: 0;
    right: 0;
  }
  .bank {
    display: flex;
    align-items: center;
    margin-top: 2px;
    img {
      width: 30px;
      margin-right: 14px;
      border-radius: 30px;
    }
    img.filter {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
    .tit {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #f0f0f0;
    }
  }
  .number {
    margin-top: 44px;

    font-size: 18px;
    font-family: GothamSSm-Book, GothamSSm;
    font-weight: normal;
    color: #ffffff;
    line-height: 21px;
    letter-spacing: 2px;
  }
  .company {
    margin-top: 11px;
    div {
      display: inline-block;
    }
    .name {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 17px;
      margin-top: 32px;
    }
  }
}

.money-desc {
  margin-top: 39px;
  .tit {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #869daa;
    line-height: 20px;
  }
  .content {
    display: flex;
    margin-top: 14px;
    .count {
      width: 292px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e5e5e5;
      padding: 14px 16px;
      margin-right: 10px;
      font-size: 20px;
      font-family: GothamSSm-Medium, GothamSSm;
      font-weight: 500;
      color: rgba(29, 28, 28, 1);
      span {
        color: rgba(102, 102, 102, 1);
      }
    }
    .area {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 148px;
      height: 56px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e5e5e5;
      .c {
        width: 26px;
        margin-right: 15px;
      }
      .d {
        width: 5px;
        margin-left: 24px;
      }
      span {
        font-size: 14px;
        font-family: GothamSSm-Medium, GothamSSm;
        font-weight: 500;
        color: #666666;
      }
    }
  }
}
.channel-desc {
  margin-top: 40px;
  .tit {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #869daa;
    margin-bottom: 12px;
    // line-height: 20px;
  }
  :deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
    color: #1d1c1c;
  }
}
.account-desc {
  margin-top: 40px;
  .tit {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #1d1c1c;
    line-height: 40px;
  }
  .acc-list {
    .acc-item {
      span {
        display: inline-block;
        width: 56px;
        color: #869daa;
        margin-right: 18px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4f595f;
      line-height: 40px;
    }
  }
}
.btn-desc {
  margin-top: 140px;
  display: flex;
  justify-content: center;
  .wrap {
    cursor: pointer;
    margin: 0 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #e23d28;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 20px;
      }
    }
    .r {
      background: #869daa;
    }
    .r.out {
      background: #25b5d9;
    }
    div {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4f595f;
      // line-height: 20px;
    }
  }
}
.container {
  :deep(.el-drawer__wrapper) {
    // position: relative;
    z-index: 119 !important;
  }
  :deep(.el-drawer__header) {
    margin-bottom: 40px;
  }

  :deep(.el-drawer__body) {
    padding: 55px 80px 40px 80px;
  }
}
</style>
